<template>
  <div class="dashboard-editor-container">
    <div>
      <el-card>
        <el-form :model="ruleForm" style="margin-top:10px;" size="mini" label-position="top" ref="ruleForm">
          <el-row :gutter="10">
            <el-col :lg="4" :md="6">
              <el-form-item label="客户等级" prop="CUSTOMLEVEL">
                <el-select v-model="ruleForm.CUSTOMLEVEL" size="mini" clearable placeholder="请选择采集方式">
                  <el-option v-for="item in levelOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="渠道" prop="CHANNELTYPE">
                <el-select v-model="ruleForm.CHANNELTYPE" size="mini" clearable placeholder="请选择渠道">
                  <el-option v-for="item in channelOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                    :value="item.FIELDKEY"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="业务类型" prop="BUSINESSTYPE">
                <el-select v-model="ruleForm.BUSINESSTYPE" size="mini" clearable placeholder="请选择业务类型">
                  <el-option v-for="item in typeOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="多媒体类型" prop="MEDIATYPE">
                <el-select v-model="ruleForm.MEDIATYPE" size="mini" clearable placeholder="请选择多媒体类型">
                  <el-option v-for="item in mediaOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                    :value="item.FIELDKEY"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="坐席级别" prop="AGENTLEVEL">
                <el-select v-model="ruleForm.AGENTLEVEL" size="mini" clearable placeholder="请选择坐席级别">
                  <el-option v-for="item in agentOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="抽样标识" prop="TASKFLAG">
                <el-select v-model="ruleForm.TASKFLAG" size="mini" clearable placeholder="请选择抽样标识">
                  <el-option v-for="item in taskOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :lg="4" :md="6">
              <el-form-item label="任务状态" prop="TASKSTATUS">
                <el-select v-model="ruleForm.TASKSTATUS" size="mini" clearable placeholder="请选择任务状态">
                  <el-option v-for="item in taskStuatsOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :lg="4" :md="6">
              <el-form-item label="分配标识" prop="QUALIFLAG">
                <el-select v-model="ruleForm.QUALIFLAG" size="mini" clearable placeholder="请选择分配标识">
                  <el-option v-for="item in QUALIFLAGOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :lg="6" :md="6" style="margin-top:20px;">
              <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="queryData">查询
              </el-button>
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('ruleForm')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <el-row style="margin-top:20px">
      <el-col>
        <el-card>
          <el-row>
            <el-col :md="24" :lg="20">
              <el-button type="primary" size="mini" icon='el-icon-more'  :disabled="currentRow.length!=1" @click="detail">查看详情</el-button>
            </el-col>
          </el-row>
          <el-table :data="tableData" @selection-change="handleCurrentChange" class="tableMarginTop" border
            highlight-current-row ref="tableData">
            <el-table-column type="selection" width="40px"></el-table-column>
            <el-table-column prop='TASKID' label='任务号' align="center"></el-table-column>
            <el-table-column prop='OPERAWORKDATE' label='抽样日期' width="100" align="center"></el-table-column>
            <el-table-column prop='SAMPLFLAG' label='抽样方式' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='SAMPLER' label='抽样人员' width="100" align="center"></el-table-column>
            <el-table-column prop='BATCHNO' label='采集批次号' width="100" align="center"></el-table-column>
            <el-table-column prop='BATCHDATE' label='采集日期' width="100" align="center"></el-table-column>
            <el-table-column prop='COLLECTSERNO' label='采集流水号' width="100" align="center"></el-table-column>
            <el-table-column prop='CHANNELTYPE' label='渠道类型' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='TASKDATE' label='任务分配日期' align="center"></el-table-column>             
            <el-table-column prop='TASKBEGINDATE' label='任务规定开始日期' align="center"></el-table-column> 
            <el-table-column prop='TASKENDDATE' label='任务规定结束日期' align="center"></el-table-column> 
            <el-table-column prop='TASKSTATUS' label='任务状态' align="center" :formatter="dataFormat"></el-table-column>            
            <el-table-column prop='TASKFLAG' label='任务方式' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='QUALITER' label='质检员' align="center" width="120"></el-table-column>
            <el-table-column prop='QUALITDATE' label='质检日期' align="center" width="120"></el-table-column>
            <el-table-column prop='SCORE' label='得分' align="center" width="120"></el-table-column>
            <el-table-column prop='APPEALFLAG' label='申诉标识' align="center" width="120" :formatter="dataFormat"></el-table-column>
            <!-- <el-table-column type="selection" width="40px"></el-table-column> -->
            <!-- <el-table-column prop='COLLECTSERNO' label='采集流水号' width="100"></el-table-column> -->
            <!-- <el-table-column prop='TASKID' label='任务号' align="center"></el-table-column>
            <el-table-column prop='BATCHNO' label='采集批次号' width="100" align="center"></el-table-column>
            <el-table-column prop='BATCHDATE' label='采集日期' width="100" align="center"></el-table-column>
            <el-table-column prop='SESSIONID' label='会话ID' width="100" align="center"></el-table-column>
            <el-table-column prop='CUSTOMER' label='客户姓名' align="center"></el-table-column>
            <el-table-column prop='CUSTOMLEVEL' label='客户等级' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='TELNUMBER' label='电话号码' align="center" width="110"></el-table-column>
            <el-table-column prop='CUSTOMIDTYPE' label='证件类型' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='CUSTOMIDNO' label='客户证件号' align="center" width="120"></el-table-column>
            <el-table-column prop='CALLTYPE' label='呼叫类型' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='AREA' label='运营地区' align="center"></el-table-column>
            <el-table-column prop='AGENTID' label='坐席ID' align="center"></el-table-column>
            <el-table-column prop='AGENTNAME' label='坐席姓名' align="center"></el-table-column>
            <el-table-column prop='AGENTLEVEL' label='坐席级别' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='EXTNO' label='分机号' align="center"></el-table-column>
            <el-table-column prop='TEAM' label='班组' align="center"></el-table-column>
            <el-table-column prop='SKILL' label='技能组' align="center"></el-table-column>
            <el-table-column prop='MEDIATYPE' label='多媒体类型' align="center" width="100" :formatter="dataFormat">
            </el-table-column>
            <el-table-column prop='CHANNELTYPE' label='渠道类型' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='BEGINTIME' label='会话开始时间' align="center" width="110"></el-table-column>
            <el-table-column prop='ENDTIME' label='会话结束时间' align="center" width="110"></el-table-column>
            <el-table-column prop='SESSIONTIME' label='会话持续时长' align="center" width="110"></el-table-column>
            <el-table-column prop='BRNO' label='机构号' align="center"></el-table-column>
            <el-table-column prop='BUSINESSTYPE' label='业务类型' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='COLLECTFLAG' label='采集方式' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='FILEPATH' label='音视频文件路径' align="center" width="120"></el-table-column>
            <el-table-column prop='QUALITER' label='质检员' align="center" width="120"></el-table-column>
            <el-table-column prop='TASKSTATUS' label='任务状态' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='TASKFLAG' label='抽样标识' align="center" :formatter="dataFormat"></el-table-column> -->
            <el-table-column label='操作' fixed="right" align="center" width="200">
              <template slot-scope="scope">
                <div>
                  <el-button size="mini" type="warning" @click="openUpdate(scope.row)" icon="el-icon-edit">修改
                  </el-button>
                  <el-button size="mini" type="danger" @click="delData(scope.row)" icon="el-icon-delete">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
            <el-pagination :current-page="currentPage" background @size-change="handleSizeChange"
              :page-sizes="[10,25,50,100]" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper"
              :total="tableTotal" @current-change="changePage"></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 修改质检人员 -->
    <el-dialog width="60%" title="修改质检人员" :close-on-click-modal="false" :visible.sync="updateIsShow" append-to-body
      @close="closeDialog">
      <el-row>
        <el-form :model="updateForm" size="mini" label-width="100px" ref="updateForm">
          <el-col :span="24">
            <el-form-item label="任务ID" prop="TASKID">
              <el-input size="small" disabled v-model="updateForm.TASKID"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务状态码" prop="TASKSTATUS">
              <el-select v-model="updateForm.TASKSTATUS" disabled size="mini" clearable placeholder="请选择任务状态">
                  <el-option v-for="item in taskStuatsOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="质检人员" prop="QUALITER">
              <el-select v-model="updateForm.QUALITER" size="mini" clearable placeholder="请选择抽样标识">
                  <el-option v-for="item in seatOption" :value="item.USERNUM" :key="item.USERNUM" :label="item.USERNAME">
                  </el-option>
                </el-select>
              <!-- <el-input size="small" v-model="updateForm.QUALITER"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="submitForm('updateForm')">保存</el-button>
              <el-button @click="updateIsShow = false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-dialog>
    <component :is="dialogList.detailDialog" :option="detailOptions"></component>
  </div>
</template>

<script>
  // 发送接口
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import request from "@/common/utils/requestQC";
  import dataQuery from "@/message/QCManage/sampleManage/sampleResultManage/querySampling";
  import toolBox from "@/common/utils/toolBox";
  import dictionary from '@/message/wfm/baseData/dictionaryManage/dictionaryQuery';
  import requestWFM from "@/common/utils/requestWFM";
  import manage from "@/message/QCManage/taskAssignment/taskAssignmentManage/taskAssignmentManage";
  import querySeat from '@/message/QCManage/taskAssignment/taskAssignment/querySeat';
  import detailDialog from "./dialog/detailDialog";

  //批量上传
  export default {
    name: '',
    data() {
      return {
        dialogList: {
          detailDialog,
        },
        detailOptions: {
          isShow: false,
          title: "",
          row: {}
        },
        seatOption:[],//质检员
        updateForm: {
          TASKID: '',
          TASKSTATUS: '',
          QUALITER: '',
        },
        updateIsShow: false,
        currentRow: [],
        levelOption: [{
            key: '001',
            label: '非VIP'
          },
          {
            key: '002',
            label: 'VIP黄金级'
          },
          {
            key: '003',
            label: 'VIP铂金级'
          },
          {
            key: '004',
            label: 'VIP钻石级'
          },
        ],
        channelOption: [],
        typeOption: [{
            key: '0',
            label: '账务类'
          },
          {
            key: '1',
            label: '签约类'
          },
          {
            key: '2',
            label: '信息维护类'
          },
          {
            key: '3',
            label: '账户类'
          },
          {
            key: '4',
            label: '理财类'
          },
        ],
        mediaOption: [],
        agentOption: [{
            key: '001',
            label: '一星'
          },
          {
            key: '002',
            label: '二星'
          },
          {
            key: '003',
            label: '三星'
          },
          {
            key: '004',
            label: '四星'
          },
          {
            key: '005',
            label: '五星'
          },
        ],
        taskOption: [{
            key: '0',
            label: '自动'
          },
          {
            key: '1',
            label: '手动'
          }
        ],
        taskStuatsOption: [{
            key: '0',
            label: '未开始'
          },
          {
            key: '1',
            label: '已完成'
          },
          {
            key: '2',
            label: '处理中'
          },
          {
            key:'3',
            label:'废弃'
          }
        ],
        QUALIFLAGOption: [{
            key: '0',
            label: '全部'
          },
          {
            key: '1',
            label: '已分配'
          },
          {
            key: '2',
            label: '未分配'
          }
        ],
        tableTotal: 0,
        pageSize: undefined,
        currentPage: 1, //表格当前页
        tableData: [
        ],
        ruleForm: {
          CUSTOMLEVEL: '', //客户等级
          CHANNELTYPE: '', //渠道
          BUSINESSTYPE: '', //业务类型
          MEDIATYPE: '', //多媒体类型
          AGENTLEVEL: '', //坐席级别
          TASKFLAG: '', //抽样标识  0-自动 1-手动
          TASKSTATUS: '', //任务状态  0-未开始 1-已完成 2-处理中
          // BATCHBEGINDATE: '',//抽样开始日期
          // BATCHENDDATE: '',//抽样结束日期
          QUALIFLAG: '1', //分配标识   0-全部 1-已分配 2-未分配
        },
        loading: false,
      }
    },
    computed: {},
    created() {
      this.pageSize = getGlobalParams.get("PageSize");
    },
    mounted() {
      this.queryData()
      this.mediaQuery()
      this.channelQuery()
      this.querySeat();
    },
    watch: {},
    methods: {
      // 查询质检人员
      async querySeat() {
        let resBody = new querySeat();
        resBody.data.USERNUM = ''
        // resBody.data.BRANCHNUM = this.form.BRANCHNUM;
        // resBody.data.USERNAME = this.form.SPECIALATTRIBUTE;
        resBody.data.CurrPage = '1'
        resBody.data.PageRowNum = '100'
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.seatOption = response.BODY.RSPSTRUCT;
          console.log(this.seatOption)
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      closeDialog() {
        if (this.$refs['updateForm'] != undefined) {
          this.$refs['updateForm'].clearValidate();
          this.$refs['updateForm'].resetFields();
        }
        this.updateForm = {
          TASKID: '',
          TASKSTATUS: '',
          QUALITER: '',
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let resBody = new manage()
            resBody.data.OPERATE = '0'
            resBody.data.TASKID = this.updateForm.TASKID
            resBody.data.QUALITER = this.updateForm.QUALITER
            let response = await request(resBody);
            if (response.SYS_HEAD.ReturnCode == "000000") {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.updateIsShow = false
              this.queryData()
            } else {
              this.$message({
                type: "error",
                message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD
                  .ReturnMessage
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      openUpdate(row) {
        this.updateIsShow = true
        this.updateForm.TASKSTATUS = row.TASKSTATUS
        this.updateForm.QUALITER = row.QUALITER
        this.updateForm.TASKID = row.TASKID
      },
      delData(row) {
        this.$confirm('此操作将废除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let resBody = new manage()
          resBody.data.OPERATE = '1'
          resBody.data.TASKID = row.TASKID
          let response = await request(resBody);
          if (response.SYS_HEAD.ReturnCode == "000000") {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.queryData()
          } else {
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 查询业务渠道
      async channelQuery() {
        let resBody = new dictionary();
        resBody.data.FIELDCODE = 'CHANNELTYPE'
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 100
        let response = await requestWFM(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.channelOption = response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 查询多媒体类型
      async mediaQuery() {
        let resBody = new dictionary();
        resBody.data.FIELDCODE = 'MULMEDIATYPE'
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 100
        let response = await requestWFM(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.mediaOption = response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 查询抽样结果
      async queryData() {
        let resBody = new dataQuery()
        resBody.data.CUSTOMLEVEL = this.ruleForm.CUSTOMLEVEL
        resBody.data.CHANNELTYPE = this.ruleForm.CHANNELTYPE
        resBody.data.BUSINESSTYPE = this.ruleForm.BUSINESSTYPE
        resBody.data.MEDIATYPE = this.ruleForm.MEDIATYPE
        resBody.data.AGENTLEVEL = this.ruleForm.AGENTLEVEL
        resBody.data.TASKFLAG = this.ruleForm.TASKFLAG
        resBody.data.TASKSTATUS = '0'
        // resBody.data.BATCHBEGINDATE = this.ruleForm.BATCHBEGINDATE
        // resBody.data.BATCHENDDATE = this.ruleForm.BATCHENDDATE
        resBody.data.QUALIFLAG = this.ruleForm.QUALIFLAG
        resBody.data.CurrPage = this.currentPage + ''
        resBody.data.PageRowNum = this.pageSize + ''
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.tableData = response.BODY.RSPSTRUCT
          this.tableTotal = response.BODY.TotalRowNum
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      changePage(val) {
        this.currentPage = val;
        this.queryData()
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.queryData()
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      // 重置查询条件
      clearForm(item) {
        // 重置表格
        this.$refs["" + item].resetFields();
      },
      dataFormat(row, column) {
        //格式化表格
        if (column.property == "CUSTOMLEVEL")
          // 001-非VIP 002-VIP黄金级 003-VIP铂金级 004-VIP钻石级
          return row[column.property]=='001'?'非VIP':row[column.property]=='002'?'VIP黄金级':row[column.property]=='003'?'VIP铂金级':row[column.property]=='004'?'VIP钻石级':row[column.property];
        
        if (column.property == "CUSTOMIDTYPE")
          // 001-身份证 002-军官证 003-其他
          return row[column.property]=='001'?'身份证':row[column.property]=='002'?'军官证':row[column.property]=='003'?'其他':row[column.property];
        
        if (column.property == "CALLTYPE")
          // 0-呼出 1-呼入
          return row[column.property]=='0'?'呼出':row[column.property]=='1'?'呼入':row[column.property];
        
        if (column.property == "AGENTLEVEL")
          // 001-一星 002-二星 003-三星 004-四星 005-五星
          return row[column.property]=='001'?'一星':row[column.property]=='002'?'二星':row[column.property]=='003'?'三星':row[column.property]=='004'?'四星':row[column.property]=='005'?'五星':row[column.property];
        
        if (column.property == "MEDIATYPE")
          // voice-电话 video-视频 chat-文字
          return row[column.property]=='voice'?'电话':row[column.property]=='video'?'视频':row[column.property]=='chat'?'文字':row[column.property];
        
        if (column.property == "CHANNELTYPE")
          // C001-电话  C002-微信  C003-PAD
          return row[column.property]=='C001'?'电话':row[column.property]=='C002'?'微信':row[column.property]=='C003'?'PAD':row[column.property];

        if (column.property == "BUSINESSTYPE")
          // 0-账务类 1-签约类 2-信息维护类 3-账户类 4-理财类，多个业务类型用“|”分隔
          return row[column.property]=='0'?'账务类':row[column.property]=='1'?'签约类':row[column.property]=='2'?'信息维护类':row[column.property]=='3'?'账户类':row[column.property]=='4'?'理财类':row[column.property];
        
        if (column.property == "SAMPLFLAG"||column.property == "COLLECTFLAG" || column.property == "TASKFLAG")
          // 0-自动 1-手动
          return row[column.property]=='0'?'自动':row[column.property]=='1'?'手动':row[column.property];
        
        if (column.property == "TASKSTATUS")
          // 0-未开始 1-已完成 2-处理中 3-废弃 4-未分配
          return row[column.property]=='0'?'未开始':row[column.property]=='1'?'已完成':row[column.property]=='2'?'处理中':row[column.property]=='3'?'废弃':row[column.property]=='4'?'未分配':row[column.property];
        if (column.property == "APPEALFLAG")
          return row[column.property]=='0'?'否':row[column.property]=='1'?'是':row[column.property]
      },
      handleCurrentChange(val) {
        this.currentRow = val;
        console.log("===="+JSON.stringify(this.currentRow))
      },
      detail(){
        this.detailOptions.row = this.currentRow;
        this.detailOptions.title = '质检任务操作详情';
        this.detailOptions.isShow = true;
      }
    }
  }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
